<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script> -->
</head>
<body>
<table id="menuTable" class="layui-table" lay-filter="menuTable"></table>
<script type="text/html" id="toolbarDemo1">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
		<button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
  	</div>
</script>
	  
<script type="text/javascript">
	layui.use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var crow=null;
        var tableData=null;
        var renderTable = function () {
            layer.load(2);
            treetable.render({
            	height:'full-165',
            	id:'menuTable',
                treeColIndex: 0,
                treeSpid: '0',
                treeIdName: 'id',
                treePidName: 'parentId',
                treeDefaultClose: false,
                treeLinkage: false,
                elem: '#menuTable',
                url: 'menu/treeList',
                toolbar: '#toolbarDemo1',
                page: false,
                cols: [[
                    /* {type: 'radio'}, */
                    {field: 'name', title: '名称'},
                    {field: 'url' , title: '地址'},
                    {field: 'icon',title:'图标'},
                    {field: 'role', title: '权限',
                    	templet: function(d){
                    		console.info(d);
                        	return d.role?d.role.name:'';
                    	}
                  	},
                    {field: 'idx1', title: '排序'}
                ]],
                done: function (res) {
                    layer.closeAll('loading');
                    tableData=res.data;
                    if(crow){
                    	console.info(tableData);
                    	console.info(crow.data.id);
                    	console.info(getRowData(crow.data.id));
                    	var rowIdx=getRowIdx(crow.data.id);
                    	console.info(rowIdx);
                    	var trstr="tr[data-index='"+rowIdx+"']";
                    	$(trstr).addClass('selected');
                    }
                }
            });
        };
        renderTable();
        
        table.on('row',function(obj){
        	if(crow&&crow.data.id==obj.data.id){
        		crow=null;
        		obj.tr.removeClass('selected');
        	}else{
        		crow=obj;
        		obj.tr.addClass('selected').siblings().removeClass('selected');
        	}
        });
        
        table.on('toolbar',function(obj){
        	switch(obj.event){
	        	case 'add':
	        		add();
	        		break;
	        	case 'update':
	        		update();
	        		break;
	        	case 'delete':
	        		del();
	        		break;
        	}
        });
        
        function getRowData(id){
        	for(var i=0;i<tableData.length;i++){
        		var row=tableData[i];
        		if(row.id==id){
        			return row;
        		}
        	}
        	return null;
        }
        
        function getRowIdx(id){
    		var rowData=getRowData(id);
    		return rowData?rowData.LAY_TABLE_INDEX:null;
        }
        
		function add(){
			var crId = crow?crow.data.id:'';
			//var crId=cr.data.length==1?cr.data[0].id:'';
			$.get('menu/edit',{parentId:crId},function(html){
				layer.open({
			    	id:'add',
			    	type:1,
			    	title:'新增',
			    	area: ['500px','500px'],
			    	content:html,
			    	btn:['提交','退出'],
			    	success:function(layero,index){
			    		layui.use('form',function(){
			    			var form=layui.form;
			    			layero.addClass('layui-form');
			    			var submitBtn=layero.find('.layui-layer-btn0');
			    			submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
			    			layero.keydown(function(e){
			    				 if(e.keyCode==13){
			    					 submitBtn.click();
			    				 }
			    			 });
			    			
			    			form.on('submit(formVerify)',function(data){
			    				$.post('menu/save',data.field,function(result){
			    					if(result.success){
			    						layer.close(index);
			    						renderTable();
			    					}
			    					layer.msg(result.msg,{offset:'rb'});
			    				});
			    				return false;
			    			});
			    		});
			    	}
					
				});
			},'html');
		}
		
		function update(){
			//var cr = table.checkStatus('roleTable');
			if(!crow){
				layer.alert('请先选择一条数据再进行修改操作！');
				return;
			}
			var crId= crow?crow.data.id:'';
			$.get('menu/edit',{id:crId},function(html){
				layer.open({
			    	id:'update',
			    	type:1,
			    	title:'修改',
			    	area: ['500px','500px'],
			    	content:html,
			    	btn:['提交','退出'],
			    	
			    	success:function(layero,index){
			    		layui.use('form',function(){
			    			var form=layui.form;
			    			//让‘提交’按钮有提交功能
				    		layero.addClass('layui-form');
				    		var submitBtn=layero.find('.layui-layer-btn0');
				    		submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
				    		//在弹出层里绑定回车就提交表单
				    		layero.keydown(function(e){
				    			if(e.keyCode==13){
				    				submitBtn.click();
				    			}
				    		});
				    		form.on('submit(formVerify)',function(data){
				    			$.post('menu/save',data.field,function(result){
				    				if(result.success){
				    					layer.close(index);
				    					renderTable();
				    				}
				    				layer.msg(result.msg,{offset:'rb'});
				    			});
				    			return false;
				    		});
			    		}); 
			    	}
				});
				
			},'html');
		}
		
		function del(){
			//var cr = table.checkStatus('roleTable');
			if(!crow){
				layer.alert('请先选择一条数据再进行删除操作！');
				return;
			}
			var crId=crow?crow.data.id:'';
			layer.confirm('真的删除选定行的数据吗?', function(index){
				$.post('menu/delete',{id:crId},function(result){
					if(result.success){
						layer.close(index);
						crow=null;
						renderTable();
					}
					layer.msg(result.msg,{offset:'rb'});
				});
			});
		}
	});
</script>	  
</body>
</html>